<template>
  <!-- 操作栏 -->
  <div class="header">
    <div class="header-title">
      <svg-icon name="menu"></svg-icon>
      {{ $t('menus.Menu') }}
    </div>
    <div>
      <el-button
        type="primary"
        :icon="Plus"
        :size="$store.getters.size"
        @click="handleDialogValue('add_parent', null)"
        >{{ $t('btn.addGrade') }}</el-button
      >
      <el-button
        type="success"
        :icon="Plus"
        :size="$store.getters.size"
        @click="handleDialogValue('add_child', null)"
        >{{ $t('btn.addLow') }}</el-button
      >
      <el-button
        type="danger"
        :icon="Select"
        :size="$store.getters.size"
        @click="selectCatalog"
        >{{ $t('btn.selectDirectory') }}</el-button
      >
    </div>
  </div>
  <div>
    <el-table
      stripe
      border
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      default-expand-all
      highlight-current-row
      @current-change="handleCurrentChange"
    >
      <el-table-column type="index" width="50" />
      <el-table-column
        :width="item.width"
        :align="item.align"
        :prop="item.prop"
        :label="$t(`table.${item.label}`)"
        v-for="(item, index) in options"
        :key="index"
      >
        <!-- 图标 -->
        <template v-slot="{ row }" v-if="item.prop === 'icon'">
          <el-image
            class="icon"
            :src="`${$common.apiUrl + row.icon}`"
            :preview-src-list="[$common.apiUrl + row.icon]"
            :preview-teleported="true"
          />
        </template>
        <!-- 状态 -->
        <template v-slot="{ row }" v-if="item.prop === 'is_operate'">
          <el-switch
            :active-value="1"
            :inactive-value="0"
            v-model="row.is_operate"
            disabled
          />
        </template>
        <!-- 操作 -->
        <template v-slot="{ row }" v-else-if="item.prop === 'action'">
          <el-button
            type="primary"
            circle
            :icon="Edit"
            @click="handleDialogValue('edit', row)"
          ></el-button>
          <el-button
            type="danger"
            circle
            :icon="Delete"
            @click="delMenu(row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 添加或修改 -->
  <Dialog
    v-model="dialogVisible"
    v-if="dialogVisible"
    :dialogTitle="dialogTitle"
    :dialogTableValue="dialogTableValue"
    @initMenuList="initMenuList"
  />
  <!-- 选择目录 -->
  <catalog-select
    v-model="catalogVisible"
    v-if="catalogVisible"
    @onConfirm="onCatalogConfirm"
  />
</template>
<script setup>
import { ref } from 'vue'
import { ElMessage, ElLoading } from 'element-plus'
import { Plus, Edit, Delete, Select } from '@element-plus/icons-vue'
import Dialog from './components/dialog.vue'
import CatalogSelect from '@/views/system/catalog/components/catalogSelect.vue'
import { options } from './options'
import { getMenuListTree } from '@/api/menu.js'
import { apiUrl, isNull } from '@/utils/common'
import { createLogger, useStore } from 'vuex'
const store = useStore()

// 目录数据
const tableData = ref([])
// 当前选中的数据
const currentRow = ref({})

const dialogVisible = ref(false)
const dialogTitle = ref('')
const dialogTableValue = ref({})

const catalogVisible = ref(false)

// 加载菜单信息
const initMenuList = async () => {
  const res = await getMenuListTree()
  tableData.value = JSON.parse(JSON.stringify(res.data))
}
initMenuList()

const handleCurrentChange = (val) => {
  currentRow.value = val
  // console.log(currentRow.value, 'currentRow.value')
}
// 新增同级 或 新增下级
const handleDialogValue = (type, row) => {
  if (tableData.value.length == 0 && type === 'add_parent') {
    // 新增父级菜单
    dialogTitle.value = '新增父级菜单'
    dialogTableValue.value = {}
    dialogVisible.value = true
  } else if (
    currentRow.value.id &&
    ['add_parent', 'add_child'].includes(type)
  ) {
    dialogTitle.value = type === 'add_parent' ? '新增同级菜单' : '新增下级菜单'
    dialogTableValue.value = currentRow.value
    dialogVisible.value = true
  } else if (type === 'edit' && row.id) {
    dialogTitle.value = '编辑菜单'
    dialogTableValue.value = JSON.parse(JSON.stringify(row))
    dialogVisible.value = true
  } else {
    ElMessage.error('请先选择菜单')
  }
}
// 删除数据
const delMenu = (row) => {
  if (row.children.length > 0) {
    ElMessage.error('菜单父节点不允许删除')
  } else {
    ElMessage.success('删除成功')
  }
}
// 选择目录
const selectCatalog = () => {
  catalogVisible.value = true
}

const onCatalogConfirm = (data) => {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading...',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  // todo:
  // 第一步：保存下级节点
  // 第二步：触发查询方法
  console.log('选择目录结果：', data)
  setTimeout(() => {
    loading.close()
  }, 3000)
}
</script>
<style lang="scss" scoped>
@import './index.scss';
@import '@/styles/header.scss';
</style>
